<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
    <script src="{{ url_for('static', filename='jquery-1.10.2.js') }}"></script>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>

    </div>
    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content no-choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content no-choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content no-choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box">
            <div id="device_function"></div>
        </div>

    </div>
</div>
</body>
<script>

    let device_function = document.getElementById('device_function');
    live_device("{{device_id}}")

    function live_device(id) {
        var liveData = {
            "sender": "主控界面",
            "addresseeId": id
        }
            $.ajax({
                type: "POST",
                url: "/master/liveVideo",
                'data': JSON.stringify(liveData),
                dataType: "json",
                'processData': false,
                'contentType': 'application/json',
                success: function (data) {
                    liveAddr = data.addr + "/video_feed"
                    console.log(liveAddr)
                    var imgNode = document.createElement('img');
                    imgNode.style = "max-width:100%";
                    imgNode.src = liveAddr;
                    device_function.appendChild(imgNode)
                }
            });
    }

</script>
</html>